﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat-Html5</title>
</head>
<body>
    <canvas id="divCanvas" width="800" height="800" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvasDiv = document.getElementById("divCanvas"); //绘图区域
        canvasDiv.width = window.innerWidth;
        canvasDiv.height = window.innerHeight;
        let paintDiv = new FCPaint(); //绘图对象
        paintDiv.canvas = canvasDiv;
        scaleCanvas(paintDiv);
        //判断主题色
        paintDiv.defaultUIStyle = "dark";
        let url = location.href;
        if (url.indexOf("color=light") != -1) {
            paintDiv.defaultUIStyle = "light";
        }
        
        //判断是否移动端
        paintDiv.isMobile = isMobileMode();
        if (paintDiv.isMobile) {
            paintDiv.scaleFactorX = 2.5;
            paintDiv.scaleFactorY = 2.5;
        }

        //创建图层
        let div = new FCDiv();

        //初始化图层
        let initDiv = function () {
            div.dock = "fill";
            addView(div, paintDiv);
            if (div.paint.defaultUIStyle == "dark") {
                div.backColor = "rgb(0,0,0)";
                div.borderColor = "rgb(100,100,100)";
                div.textColor = "rgb(255,255,255)";
                div.scrollBarColor = "rgb(100,100,100)";
            } else if (div.paint.defaultUIStyle == "light") {
                div.backColor = "rgb(255,255,255)";
                div.borderColor = "rgb(150,150,150)";
                div.textColor = "rgb(0,0,0)";
                div.scrollBarColor = "rgb(200,200,200)";
            }
            div.backImage = "http://www.jjmfc.com/index_files/go.png";
            div.showHScrollBar = true; //是否显示横向滚动条
            div.showVScrollBar = true; //是否显示横向滚动条
            div.text = "图层";

            for (let i = 0; i < 10; i++) {
                let subDiv = new FCDiv;
                addViewToParent(subDiv, div);
                subDiv.location = new FCPoint(i * 200, i * 200);
                subDiv.size = new FCSize(200, 200);
                subDiv.text = "按钮" + i;
                subDiv.visible = true;
                subDiv.showHScrollBar = true; //是否显示横向滚动条
                subDiv.showVScrollBar = true; //是否显示横向滚动条
                if (div.paint.defaultUIStyle == "dark") {
                    subDiv.backColor = "rgb(0,0,0)";
                    subDiv.borderColor = "rgb(100,100,100)";
                    subDiv.textColor = "rgb(255,255,255)";
                    subDiv.scrollBarColor = "rgb(100,100,100)";
                } else if (div.paint.defaultUIStyle == "light") {
                    subDiv.backColor = "rgb(255,255,255)";
                    subDiv.borderColor = "rgb(150,150,150)";
                    subDiv.textColor = "rgb(0,0,0)";
                    subDiv.scrollBarColor = "rgb(200,200,200)";
                }
                subDiv.paint = paintDiv;
                for (let j = 0; j < 10; j++) {
                    let sunDiv = new FCButton;
                    addViewToParent(sunDiv, subDiv);
                    sunDiv.location = new FCPoint(j * 20, j * 40);
                    sunDiv.size = new FCSize(100, 20);
                    sunDiv.text = "按钮" + i + "," + j;
                    sunDiv.visible = true;
                    sunDiv.allowDrag = true;
                    sunDiv.backImage = "http://www.jjmfc.com/index_files/go.png";
                    sunDiv.font = "Default,12";
                    if (div.paint.defaultUIStyle == "dark") {
                        sunDiv.backColor = "rgb(0,0,0)";
                        sunDiv.borderColor = "rgb(100,100,100)";
                        sunDiv.textColor = "rgb(255,255,255)";
                    } else if (div.paint.defaultUIStyle == "light") {
                        sunDiv.backColor = "rgb(255,255,255)";
                        sunDiv.borderColor = "rgb(150,150,150)";
                        sunDiv.textColor = "rgb(0,0,0)";
                    }
                }
            }
        };

        initDiv();

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
        };


        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown_Div = function (view, mp, buttons, clicks, delta) {
            onMouseDownDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel_Div = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                //放大显示
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                    //缩小显示
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd_Div = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove_Div = function (view, mp, buttons, clicks, delta) {
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp_Div = function (view, mp, buttons, clicks, delta) {
            onMouseUpDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintDiv.onPaint = function (view, paint, clipRect) {
            onPaintDefault(view, paint, clipRect);
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        paintDiv.onPaintBorder = function (view, paint, clipRect) {
            onPaintBorderDefault(view, paint, clipRect);
        };

        /*
          * 更新布局的实现方法
          * views:视图集合
          */
        paintDiv.onUpdateView = function (views) {
            updateViewDefault(views);
        }

        //注册事件
        addMouseDownEvent(canvasDiv, paintDiv, onMouseDown_Div);
        addMouseMoveEvent(canvasDiv, paintDiv, onMouseMove_Div);
        addMouseWheelEvent(canvasDiv, paintDiv, onMouseWheel_Div);
        addMouseUpEvent(canvasDiv, paintDiv, onMouseUp_Div, onClick_Div);
        addTouchBeginEvent(canvasDiv, paintDiv, onTouchBegin_Div);
        addTouchMoveEvent(canvasDiv, paintDiv, onTouchMove_Div);
        addTouchEndEvent(canvasDiv, paintDiv, onTouchEnd_Div, onClick_Div);

        /*
         * 重置大小
         */
        let resizeAll = function () {
            canvasDiv.width = document.documentElement.clientWidth;
            canvasDiv.height = document.documentElement.clientHeight;
            scaleCanvas(paintDiv);
            updateViewDefault(paintDiv.views);
            invalidate(paintDiv);

        };


        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };
        updateViewDefault(paintDiv.views);
        //刷新界面
        invalidate(paintDiv);
    </script>
</body>
</html>
